<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">{{ isEdit ? '编辑商品' : '添加商品' }}</h1>
      <el-button @click="handleBack">
        <el-icon>
          <ArrowLeft/>
        </el-icon>
        返回列表
      </el-button>
    </div>

    <!-- 商品表单 -->
    <div class="form-container">
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-position="left"
          label-width="140px"
          @submit.prevent
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon>
              <InfoFilled/>
            </el-icon>
            基本信息
          </h3>

          <div class="form-grid">
            <el-form-item class="form-item-full" label="商品名称" prop="name">
              <el-input
                  v-model="form.name"
                  maxlength="100"
                  placeholder="请输入商品名称"
                  show-word-limit
                  size="large"
              />
            </el-form-item>

            <el-form-item class="form-item-full" label="商品副标题" prop="subtitle">
              <el-input
                  v-model="form.subtitle"
                  maxlength="200"
                  placeholder="请输入商品副标题（可选）"
                  show-word-limit
                  size="large"
              />
            </el-form-item>

            <el-form-item label="商品分类" prop="categoryId">
              <CategorySelector
                  v-model="form.categoryId"
                  mode="cascader"
                  placeholder="请选择商品分类"
                  width="100%"
              />
            </el-form-item>

            <el-form-item class="form-item-half" label="商品品牌" prop="brand">
              <el-input
                  v-model="form.brand"
                  clearable
                  maxlength="50"
                  placeholder="请输入商品品牌（可选）"
                  size="large"
              />
            </el-form-item>

            <el-form-item class="form-item-half" label="商品状态" prop="status">
              <el-select
                  v-model="form.status"
                  placeholder="请选择状态"
                  size="large"
                  style="width: 100%"
              >
                <el-option :value="1" label="上架"/>
                <el-option :value="0" label="下架"/>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <!-- 价格与库存 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon>
              <PriceTag/>
            </el-icon>
            价格与库存
          </h3>

          <div class="form-grid three-columns">
            <el-form-item class="form-item-third" label="商品价格" prop="price">
              <el-input-number
                  v-model="form.price"
                  :controls="false"
                  :min="0"
                  :precision="2"
                  :step="0.01"
                  placeholder="0.00"
                  size="large"
                  style="width: 100%"
              >
                <template #prefix>¥</template>
              </el-input-number>
            </el-form-item>

            <el-form-item class="form-item-third" label="原价" prop="originalPrice">
              <el-input-number
                  v-model="form.originalPrice"
                  :controls="false"
                  :min="0"
                  :precision="2"
                  :step="0.01"
                  placeholder="0.00"
                  size="large"
                  style="width: 100%"
              >
                <template #prefix>¥</template>
              </el-input-number>
            </el-form-item>

            <el-form-item class="form-item-third" label="库存数量" prop="stock">
              <el-input-number
                  v-model="form.stock"
                  :controls="false"
                  :min="0"
                  :precision="0"
                  :step="1"
                  placeholder="0"
                  size="large"
                  style="width: 100%"
              >
                <template #suffix>{{ form.unit || '件' }}</template>
              </el-input-number>
            </el-form-item>
          </div>
        </div>

        <!-- 商品属性 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon>
              <Setting/>
            </el-icon>
            商品属性
          </h3>

          <div class="form-grid">
            <el-form-item class="form-item-half" label="商品重量" prop="weight">
              <el-input-number
                  v-model="form.weight"
                  :controls="false"
                  :min="0"
                  :precision="2"
                  :step="0.1"
                  placeholder="0.00"
                  size="large"
                  style="width: 100%"
              >
                <template #suffix>kg</template>
              </el-input-number>
            </el-form-item>

            <el-form-item class="form-item-half" label="商品单位" prop="unit">
              <el-select
                  v-model="form.unit"
                  allow-create
                  clearable
                  filterable
                  placeholder="请选择单位"
                  size="large"
                  style="width: 100%"
              >
                <el-option label="件" value="件"/>
                <el-option label="个" value="个"/>
                <el-option label="盒" value="盒"/>
                <el-option label="包" value="包"/>
                <el-option label="瓶" value="瓶"/>
                <el-option label="袋" value="袋"/>
                <el-option label="套" value="套"/>
                <el-option label="斤" value="斤"/>
                <el-option label="公斤" value="公斤"/>
                <el-option label="克" value="克"/>
              </el-select>
            </el-form-item>

            <el-form-item class="form-item-full" label="搜索关键词" prop="keywords">
              <el-input
                  v-model="form.keywords"
                  clearable
                  maxlength="200"
                  placeholder="请输入搜索关键词，多个关键词用空格分隔（可选）"
                  show-word-limit
                  size="large"
              />
            </el-form-item>

            <el-form-item class="form-item-full" label="商品详情" prop="detail">
              <el-input
                  v-model="form.detail"
                  :rows="4"
                  maxlength="1000"
                  placeholder="请输入商品详细描述（可选）"
                  resize="none"
                  show-word-limit
                  size="large"
                  type="textarea"
              />
            </el-form-item>
          </div>
        </div>

        <!-- 商品图片 -->
        <div class="form-section">
          <h3 class="section-title">
            <el-icon>
              <Picture/>
            </el-icon>
            商品图片
          </h3>

          <div class="image-section">
            <div class="main-image-container">
              <label class="image-label">商品主图</label>
              <div class="image-upload-wrapper">
                <div v-if="form.mainImage" class="image-preview">
                  <img :src="form.mainImage" alt="商品主图"/>
                  <div class="image-actions">
                    <el-button
                        size="small"
                        type="danger"
                        @click="removeImage"
                    >
                      删除
                    </el-button>
                  </div>
                </div>

                <div v-else class="image-upload">
                  <el-upload
                      :before-upload="beforeImageUpload"
                      :http-request="uploadImage"
                      :on-error="handleImageError"
                      :on-success="handleImageSuccess"
                      :show-file-list="false"
                      action="#"
                  >
                    <div class="upload-area">
                      <el-icon color="#ccc" size="40">
                        <Plus/>
                      </el-icon>
                      <p>点击上传商品主图</p>
                      <p class="upload-tip">支持 JPG、PNG 格式，大小不超过 2MB</p>
                    </div>
                  </el-upload>
                </div>
              </div>
            </div>

            <div class="sub-images-container">
              <label class="image-label">商品子图</label>
              <div class="sub-images-wrapper">
                <div class="sub-images-list">
                  <div
                      v-for="(image, index) in form.subImages"
                      :key="index"
                      class="sub-image-item"
                  >
                    <img :src="image" alt="子图"/>
                    <div class="sub-image-actions">
                      <el-button
                          size="small"
                          type="danger"
                          @click="removeSubImage(index)"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>

                  <div v-if="form.subImages.length < 5" class="sub-image-upload">
                    <el-upload
                        :before-upload="beforeSubImageUpload"
                        :http-request="uploadSubImage"
                        :on-error="handleSubImageError"
                        :on-success="handleSubImageSuccess"
                        :show-file-list="false"
                        action="#"
                    >
                      <div class="upload-area small">
                        <el-icon color="#ccc" size="24">
                          <Plus/>
                        </el-icon>
                        <p>添加子图</p>
                      </div>
                    </el-upload>
                  </div>
                </div>
                <div class="sub-images-tip">
                  <p>最多可上传5张子图，建议尺寸：800x800px</p>
                  <p>支持 JPG、PNG 格式，大小不超过 2MB</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button size="large" @click="handleBack">
            取消
          </el-button>
          <el-button
              :loading="loading"
              size="large"
              type="primary"
              @click="handleSubmit"
          >
            {{ isEdit ? '更新商品' : '创建商品' }}
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {ArrowLeft, InfoFilled, Picture, Plus, PriceTag, Setting} from '@element-plus/icons-vue'
import {useProductStore} from '@/store/product'
import {useCategoryStore} from '@/store/category'
import CategorySelector from '@/components/CategorySelector.vue'


// 路由
const route = useRoute()
const router = useRouter()

// Store
const productStore = useProductStore()
const categoryStore = useCategoryStore()

// 响应式数据
const formRef = ref()
const loading = ref(false)

const form = reactive({
  name: '',
  subtitle: '',
  categoryId: null,
  price: 0,
  originalPrice: 0,
  stock: 0,
  brand: '',
  weight: 0,
  unit: '件',
  keywords: '',
  status: 1,
  mainImage: '',
  subImages: [],
  detail: ''
})

// 表单验证规则
const rules = {
  name: [
    {required: true, message: '请输入商品名称', trigger: 'blur'},
    {min: 2, max: 100, message: '商品名称长度在 2 到 100 个字符', trigger: 'blur'}
  ],
  categoryId: [
    {required: true, message: '请选择商品分类', trigger: 'change'}
  ],
  price: [
    {required: true, message: '请输入商品价格', trigger: 'blur'},
    {type: 'number', min: 0, message: '商品价格不能小于0', trigger: 'blur'}
  ],
  originalPrice: [
    {type: 'number', min: 0, message: '原价不能小于0', trigger: 'blur'}
  ],
  stock: [
    {required: true, message: '请输入库存数量', trigger: 'blur'},
    {type: 'number', min: 0, message: '库存数量不能小于0', trigger: 'blur'}
  ],
  brand: [
    {max: 100, message: '品牌名称长度不能超过100个字符', trigger: 'blur'}
  ],
  weight: [
    {type: 'number', min: 0, message: '重量不能小于0', trigger: 'blur'}
  ],
  unit: [
    {required: true, message: '请输入商品单位', trigger: 'blur'},
    {max: 20, message: '单位长度不能超过20个字符', trigger: 'blur'}
  ],
  keywords: [
    {max: 300, message: '关键词长度不能超过300个字符', trigger: 'blur'}
  ],
  status: [
    {required: true, message: '请选择商品状态', trigger: 'change'}
  ]
}

// 计算属性
const isEdit = computed(() => !!route.params.id)


// 方法
const handleBack = () => {
  router.push('/products')
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    loading.value = true

    if (isEdit.value) {
      await productStore.updateProduct(route.params.id, form)
      ElMessage.success('商品更新成功')
    } else {
      await productStore.createProduct(form)
      ElMessage.success('商品创建成功')
    }

    handleBack()
  } catch (error) {
    if (error !== false) { // 不是表单验证错误
      console.error('保存商品失败:', error)
      ElMessage.error('保存失败，请重试')
    }
  } finally {
    loading.value = false
  }
}

const beforeImageUpload = (file) => {
  const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPGOrPNG) {
    ElMessage.error('只能上传 JPG/PNG 格式的图片!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}

const uploadImage = async ({file}) => {
  try {
    // 将文件转换为Base64，直接存储到表单中
    const base64 = await fileToBase64(file)
    form.mainImage = base64
    ElMessage.success('图片选择成功')
  } catch (error) {
    console.error('图片处理失败:', error)
    ElMessage.error('图片处理失败，请重试')
  }
}

const handleImageSuccess = () => {
  // 上传成功的处理已在 uploadImage 中完成
}

const handleImageError = () => {
  ElMessage.error('图片上传失败，请重试')
}

const removeImage = () => {
  form.mainImage = ''
}

// 子图上传相关方法
const beforeSubImageUpload = (file) => {
  const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPGOrPNG) {
    ElMessage.error('只能上传 JPG/PNG 格式的图片!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  if (form.subImages.length >= 5) {
    ElMessage.error('最多只能上传5张子图!')
    return false
  }
  return true
}

const uploadSubImage = async ({file}) => {
  try {
    // 将文件转换为Base64，直接存储到表单中
    const base64 = await fileToBase64(file)
    form.subImages.push(base64)
    ElMessage.success('子图选择成功')
  } catch (error) {
    console.error('子图处理失败:', error)
    ElMessage.error('子图处理失败，请重试')
  }
}

const handleSubImageSuccess = () => {
  // 上传成功的处理已在 uploadSubImage 中完成
}

const handleSubImageError = () => {
  ElMessage.error('子图上传失败，请重试')
}

const removeSubImage = (index) => {
  form.subImages.splice(index, 1)
}

const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

const loadProductDetail = async () => {
  if (!isEdit.value) return

  try {
    loading.value = true
    await productStore.getProductDetail(route.params.id)

    const product = productStore.currentProduct
    if (product) {
      Object.assign(form, {
        name: product.name,
        subtitle: product.subtitle || '',
        categoryId: product.categoryId,
        price: product.price,
        originalPrice: product.originalPrice || 0,
        stock: product.stock,
        brand: product.brand || '',
        weight: product.weight || 0,
        unit: product.unit || '件',
        keywords: product.keywords || '',
        status: product.status,
        mainImage: product.mainImage,
        subImages: product.subImages || [],
        detail: product.detail
      })

      // 分类ID已经在表单数据中设置，新的CategorySelector组件会自动处理显示
    }
  } catch (error) {
    console.error('加载商品详情失败:', error)
    ElMessage.error('加载商品详情失败')
    handleBack()
  } finally {
    loading.value = false
  }
}


const loadCategoryOptions = async () => {
  try {
    // 只需要加载平铺分类数据用于分类选择器
    await categoryStore.getCategoryList({
      current: 1,
      size: 1000,  // 获取所有分类
      status: 1     // 只获取启用的分类
    })
  } catch (error) {
    console.error('加载分类选项失败:', error)
    ElMessage.error('加载分类数据失败')
  }
}

// 生命周期
onMounted(async () => {
  // 先加载分类数据，再加载商品详情（编辑模式下需要分类数据来设置选择器）
  await loadCategoryOptions()
  if (isEdit.value) {
    await loadProductDetail()
  }
})
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: var(--admin-text-primary);
  font-size: 20px;
  font-weight: 600;
}

/* 分类选择器样式 */
.category-selector {
  width: 100%;
}

.category-row {
  display: flex;
  gap: 16px;
  align-items: flex-end; /* 底部对齐 */
}

.category-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-label {
  font-size: 12px;
  color: var(--admin-text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
}


/* 表单容器样式 */
.form-container {
  background: var(--admin-bg-primary);
  border-radius: var(--admin-radius-lg);
  padding: var(--admin-space-xl);
  box-shadow: var(--admin-shadow-sm);
  max-width: 1400px;
  margin: 0 auto;
  border: 1px solid var(--admin-border-light);
}

/* 表单网格布局 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--admin-space-lg);
  align-items: start;
}

.form-item-full {
  grid-column: 1 / -1;
}

.form-item-half {
  grid-column: span 1;
}

.form-item-third {
  grid-column: span 1;
}

/* 三列布局 */
.form-grid.three-columns {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-grid.three-columns .form-item-third {
  grid-column: span 1;
}

/* 表单分组样式 */
.form-section {
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space-lg);
  background: var(--admin-bg-secondary);
  border-radius: var(--admin-radius-md);
  border: 1px solid var(--admin-border-light);
  transition: all 0.3s ease;
}

.form-section:hover {
  border-color: var(--admin-border-focus);
  box-shadow: var(--admin-shadow-sm);
}

.form-section:last-of-type {
  margin-bottom: var(--admin-space-lg);
}

.section-title {
  margin: 0 0 var(--admin-space-lg) 0;
  font-size: var(--admin-font-lg);
  font-weight: var(--admin-font-semibold);
  color: var(--admin-text-primary);
  padding-bottom: var(--admin-space-md);
  border-bottom: 2px solid var(--admin-primary);
  position: relative;
  line-height: var(--admin-line-height-sm);
  display: flex;
  align-items: center;
  gap: var(--admin-space-sm);
}

.section-title .el-icon {
  color: var(--admin-primary);
  font-size: var(--admin-font-lg);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--admin-primary);
}

/* 图片上传区域样式 */
.image-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--admin-space-xl);
  align-items: start;
}

.main-image-container,
.sub-images-container {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md);
}

.image-label {
  font-size: var(--admin-font-sm);
  font-weight: var(--admin-font-medium);
  color: var(--admin-text-primary);
  margin-bottom: var(--admin-space-sm);
}

.image-upload-wrapper,
.sub-images-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md);
}

/* 表单行间距 */
.form-row {
  margin-bottom: var(--admin-space-lg);
}

.form-row:last-child {
  margin-bottom: 0;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: var(--admin-space-md);
}

.el-form-item:last-child {
  margin-bottom: 0;
}

/* 统一的输入框样式 */
.text-input,
.number-input,
.select-input {
  width: 100%;
  min-width: 280px; /* 增加最小宽度以提升可读性 */
}

/* 数字输入框特殊样式 */
.number-input :deep(.el-input__wrapper) {
  min-width: 280px;
  min-height: var(--admin-height-md);
}

/* 有前缀的数字输入框 */
.number-input :deep(.el-input__prefix) {
  left: var(--admin-space-sm);
  color: var(--admin-text-secondary);
  font-weight: var(--admin-font-medium);
}

.number-input :deep(.el-input__inner) {
  padding-left: var(--admin-space-xl); /* 为前缀留出空间 */
  padding-right: var(--admin-space-xl); /* 为后缀留出空间 */
  font-size: var(--admin-font-sm);
}

/* 有后缀的数字输入框 */
.number-input :deep(.el-input__suffix) {
  right: var(--admin-space-sm);
  color: var(--admin-text-secondary);
  font-weight: var(--admin-font-medium);
}

/* 确保选择框和输入框高度一致 */
.text-input :deep(.el-input__wrapper),
.select-input :deep(.el-input__wrapper),
.number-input :deep(.el-input__wrapper) {
  min-height: var(--admin-height-md);
  align-items: center;
  border-radius: var(--admin-radius-md);
  transition: all 0.3s ease;
}

.text-input :deep(.el-input__wrapper):hover,
.select-input :deep(.el-input__wrapper):hover,
.number-input :deep(.el-input__wrapper):hover {
  border-color: var(--admin-primary-hover);
}

.text-input :deep(.el-input__wrapper):focus-within,
.select-input :deep(.el-input__wrapper):focus-within,
.number-input :deep(.el-input__wrapper):focus-within {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.image-upload-container {
  width: 240px;
}

.image-preview {
  position: relative;
  width: 240px;
  height: 240px;
  border: 1px solid var(--admin-border-medium);
  border-radius: var(--admin-radius-md);
  overflow: hidden;
  transition: all 0.3s ease;
}

.image-preview:hover {
  border-color: var(--admin-primary);
  box-shadow: var(--admin-shadow-md);
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview:hover .image-actions {
  opacity: 1;
}

.image-upload {
  width: 240px;
  height: 240px;
}

.upload-area {
  width: 100%;
  height: 100%;
  border: 2px dashed var(--admin-border-medium);
  border-radius: var(--admin-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--admin-bg-tertiary);
}

.upload-area:hover {
  border-color: var(--admin-primary);
  background: var(--admin-bg-hover);
}

.upload-area p {
  margin: var(--admin-space-sm) 0 0 0;
  color: var(--admin-text-secondary);
  font-size: var(--admin-font-sm);
  font-weight: var(--admin-font-medium);
}

.upload-tip {
  font-size: var(--admin-font-xs) !important;
  color: var(--admin-text-tertiary) !important;
  margin-top: var(--admin-space-xs) !important;
}

/* 子图样式 */
.sub-images-container {
  width: 100%;
}

.sub-images-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-md);
  margin-bottom: var(--admin-space-md);
}

.sub-image-item {
  position: relative;
  width: 140px;
  height: 140px;
  border: 1px solid var(--admin-border-medium);
  border-radius: var(--admin-radius-md);
  overflow: hidden;
  transition: all 0.3s ease;
}

.sub-image-item:hover {
  border-color: var(--admin-primary);
  box-shadow: var(--admin-shadow-sm);
}

.sub-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sub-image-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sub-image-item:hover .sub-image-actions {
  opacity: 1;
}

.sub-image-upload {
  width: 140px;
  height: 140px;
}

/* 操作按钮样式 */
.form-actions {
  display: flex;
  justify-content: center;
  gap: var(--admin-space-md);
  padding: var(--admin-space-lg) 0;
  border-top: 1px solid var(--admin-border-light);
  margin-top: var(--admin-space-xl);
}

.form-actions .el-button {
  min-width: 140px;
  height: var(--admin-height-lg);
  font-size: var(--admin-font-md);
  font-weight: var(--admin-font-medium);
  border-radius: var(--admin-radius-md);
  transition: all 0.3s ease;
}

.form-actions .el-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--admin-shadow-md);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .form-grid.three-columns {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid.three-columns .form-item-third:nth-child(3) {
    grid-column: 1 / -1;
  }

  .image-section {
    grid-template-columns: 1fr;
    gap: var(--admin-space-lg);
  }
}

@media (max-width: 768px) {
  .form-container {
    padding: var(--admin-space-md);
    margin: 0 var(--admin-space-sm);
  }

  .form-section {
    padding: var(--admin-space-md);
  }

  .form-grid,
  .form-grid.three-columns {
    grid-template-columns: 1fr;
    gap: var(--admin-space-md);
  }

  .form-item-full,
  .form-item-half,
  .form-item-third {
    grid-column: 1;
  }

  .form-actions {
    flex-direction: column;
    gap: var(--admin-space-sm);
  }

  .form-actions .el-button {
    width: 100%;
    min-width: auto;
  }

  .image-upload-container,
  .image-preview,
  .image-upload {
    width: 200px;
    height: 200px;
  }

  .sub-image-item,
  .sub-image-upload {
    width: 100px;
    height: 100px;
  }

  .section-title {
    font-size: var(--admin-font-md);
  }
}

.upload-area.small {
  width: 140px;
  height: 140px;
  border: 2px dashed var(--admin-border-medium);
  border-radius: var(--admin-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--admin-bg-tertiary);
}

.upload-area.small:hover {
  border-color: var(--admin-primary);
  background: var(--admin-bg-hover);
}

.upload-area.small p {
  margin: var(--admin-space-xs) 0 0 0;
  font-size: var(--admin-font-xs);
  color: var(--admin-text-secondary);
  font-weight: var(--admin-font-medium);
}

.sub-images-tip {
  font-size: var(--admin-font-xs);
  color: var(--admin-text-tertiary);
  line-height: var(--admin-line-height-md);
  padding: var(--admin-space-sm);
  background: var(--admin-bg-tertiary);
  border-radius: var(--admin-radius-sm);
  border-left: 3px solid var(--admin-info);
}

.sub-images-tip p {
  margin: 0;
  margin-bottom: var(--admin-space-xs);
}

.sub-images-tip p:last-child {
  margin-bottom: 0;
}
</style>
